<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>展示操作</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<style>
	body {
		background-color: rgb(171,195,226);
	}
	.head {
		margin-left: 200px;
		width: 700px;
	}
	
	.table {
		text-align: center;
		vertical-align: middle;
	}
	
	.footer {
		margin-top: 10px;
		margin-left: 200px;
	}
</style>
<body>

<h1 style="margin-left: 20px">欢迎</h1>
<div id="app">
	<div style="margin-bottom: 20px;margin-left: 200px">
		<el-input v-model="input" placeholder="请输入姓名进行查询" style="width: 500px"></el-input>
		<el-button type="primary" icon="el-icon-search" @click="searchInfo">搜索</el-button>
		<span style="color:peru;">{{tips}}</span>
	</div>
	<div class="head">
		<table class="table table-bordered table-hover" style="text-align: center">
			<tr style="font-weight: bold">
				<td>序号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>操作</td>
			</tr>
			<template v-for="(person,index) in personlist">
				<tr>
					<td class="active">{{person.id}}</td>
					<td class="active">{{person.name}}</td>
					<td class="active">{{person.sex === 'M' ? '男' : '女'}}</td>
					<td class="active">{{person.age}}</td>
					<td class="active">
						<el-button type="primary" @click="updateInfo(person)">修改</el-button>
						<el-button type="danger" @click="deleteInfo(person.id)">删除</el-button>
					</td>
				</tr>
			</template>
		</table>
		<el-pagination
				background
				layout="prev, pager, next"
				:total="listCount"
				style="height: 12px;
				margin-left: 100px"
				:page-size="3"
				:current-page="currentPage"
				@current-change="pageChange">
		</el-pagination>
	</div>
	<div style="margin-top: 20px;margin-left: 800px">
		<el-button type="success" @click="addPerson">添加</el-button>
	</div>
	<div class="footer" v-if="isShow">
		<div style="color: red;font-size: 20px;font-weight: bold;margin-bottom: 20px">
			{{info}}
		</div>
		<form class="form-inline">
			<div class="form-group">
				<label for="exampleInputName2">姓名</label>
				<input type="text" class="form-control" id="exampleInputName2" v-model="username">
			</div>
			<div class="form-group">
				<label for="exampleInputEmail2">性别</label>
				<input type="text" class="form-control" id="exampleInputEmail2" v-model="userSex">
			</div>
			<div class="form-group">
				<label for="exampleInputAge">年龄</label>
				<input type="number" class="form-control" id="exampleInputAge" v-model="userAge">
			</div>
			<el-button type="info" @click="submitInfo">确认</el-button>
			<span style="color: red;font-size: 15px;font-weight: bold">{{subInfo}}</span>
		</form>
	</div>
</div>
</body>
<script type="text/javascript">
	
	let baseUrl = 'http://localhost:8080'
	let vm = new Vue({
		el: '#app',
		data: {
			personlist: [],
			isShow: false,
			//==========================信息
			info: '', //上面提示操作信息
			subInfo: '',//输入框警告信息
			tips: '',//搜索返回信息
			typeOperate: 1, //1.为修改  2.为添加
			//========================================下面为用户信息
			userId: '',
			username: '',
			userSex: '',
			userAge: '',
			//===========================要搜索的姓名
			input: '',
			//分页区间==================================
			listCount: 0,
			currentPage: 1
			
		},
		methods: {
			deleteInfo(pid) {
				this.$confirm('你确定删除，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios({
						url: baseUrl + '/person/delete/' + pid,
						method: 'delete'
					}).then(res => {
						if (res.data.code === 1) { //成功
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						} else { //删除失败
							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			updateInfo(person) {
				this.typeOperate = 1
				this.userId = person.id
				this.username = person.name
				this.userSex = person.sex === 'M' ? '男' : '女';
				this.userAge = person.age
				this.isShow = true
				this.info = "请修改您要修改的对象"
			}
			,
			addPerson() {
				this.info = "请输入您要添加对象的信息:"
				this.isShow = true
				this.typeOperate = 2
				this.username = ''
				this.userSex = ''
				this.userAge = ''
			}
			,
			//添加或者修改的提交
			submitInfo() {
				if (this.username.length < 3 || this.username.length > 16) {
					this.subInfo = '您输入的用户名长度需要大于3小于16'
				} else if (this.userSex !== '男' && this.userSex !== '女') {
					this.subInfo = '兄弟，您输入的性别只能为男或女'
				} else if (this.userAge < 0 || this.userAge > 150) {
					this.subInfo = '兄弟，您输入的年龄是不是搞错了'
				} else {  //判断无错误后开始
					//根据类型来提交
					if (this.typeOperate === 1) { //修改操作
						axios({
							url: baseUrl + '/person/update',
							method: 'put',
							data: {
								id: this.userId,
								name: this.username,
								sex: this.userSex,
								age: this.userAge
							}
						}).then(res => {
							if (res.data.code === 1) { //成功弹窗
								this.$message({
									message: '操作成功喽，起飞',
									type: 'success'
								});
							} else {
								this.$message.error('抱歉兄弟，似乎失败了');
							}
							//不管结果，将框隐藏
							this.isShow = false
						})//===================================================
					} else {  //这个为添加操作
						axios({
							url: baseUrl + '/person/add',
							method: 'post',
							params: {
								name: this.username,
								sex: this.userSex,
								age: parseInt(this.userAge)
							}
						}).then(res => {
							if (res.data.code === 1) { //成功弹窗
								this.$message({
									message: '恭喜你，完成添加操作',
									type: 'success'
								});
							} else {
								this.$message.error('抱歉兄弟，似乎失败了');
							}
							//不管结果，将框隐藏
							this.isShow = false
						})
					}
				}
			}
			,
			searchInfo() {
				this.tips = ''
				this.isShow = false
				if (this.input.trim().length !== 0) {
					axios({
								url: baseUrl + '/person/selectByName/' + this.input,
								method: 'get',
								params: {
									page:1
								}
							}
					).then(res => {
						if (this.personlist.length === 0) {
							this.tips = '没有找到任何人呢，啾咪'
						}else{
							console.log(res)
							this.personlist = res.data.data.listPerson
							this.listCount = res.data.data.count
						}
					})
				} else {
					this.isShow = false
					this.currentPage = 1
					axios({
						url: baseUrl + '/person/pageAll',
						method: 'get',
						params: {
							page: this.currentPage
						}
					}).then(res => {
						this.personlist = res.data.data.listPerson
						this.listCount = res.data.data.count
					})
				}
			},
			//分页设置
			pageChange(e) {
				this.isShow = false
				this.currentPage = e
				axios({
					url: baseUrl + '/person/pageAll',
					method: 'get',
					params: {
						page: this.currentPage
					}
				}).then(res => {
					this.personlist = res.data.data.listPerson
					this.listCount = res.data.data.count
				})
				
			}
		},
		created() {
			//查询所有
			axios({
				url: baseUrl + '/person/pageAll',
				method: 'get',
				params: {
					page: this.currentPage
				}
			}).then(res => {
				this.personlist = res.data.data.listPerson
				this.listCount = res.data.data.count
			})
		}
	})
</script>
</html>